<template>
  <nav class="nav-box">
    <div class="nav-left">
      <div class="return-icon" @click="returnPage">
        <el-icon>
          <ArrowLeftBold/>
        </el-icon>
      </div>
      <!-- 简历标题 -->
      <div class="resume-title">
        <p v-show="!isShowIpt" style="margin: 0">
          {{ HJNewJsonStore.config.title }}
          <el-icon :size="20" color="#74a274" @click="changeTitle">
            <Edit/>
          </el-icon>
        </p>
        <el-input
            v-show="isShowIpt"
            ref="titleIpf"
            v-model="HJNewJsonStore.config.title"
            autofocus
            placeholder="请输入标题"
            @blur="blurTitle"
        />
      </div>
      <!-- 最近保存时间 -->
      <div v-if="draftTips" class="draft-tips-box">
        <span class="draft-tips">{{ draftTips }}</span>
        <svg-icon icon-name="icon-shijian1" color="#999999" size="14px"></svg-icon>
      </div>
    </div>
    <div class="nav-center"></div>
    <div class="nav-right">
      <el-tooltip effect="dark" content="AI智能诊断" placement="bottom">
        <div class="ai-bot-container ai-optimize-box" @click="aiOptimize"
        ><img src="../../assets/images/home/ai-optimize.svg" width="24" height="24" alt=""/>
          <div
              class="ai-bot-text"
          >AI简历诊断
          </div
          >
        </div>
      </el-tooltip>
      <!--      <el-tooltip effect="dark" content="AI智能语种切换" placement="bottom">-->
      <!--        <div class="ai-bot-container" @click="languageSelect"-->
      <!--        ><img src="@/assets/images/ai-translate.webp" width="24" height="24"  alt=""/><div-->
      <!--            class="ai-bot-text"-->
      <!--        >AI翻译</div-->
      <!--        ></div-->
      <!--        >-->
      <!--      </el-tooltip>-->
      <el-tooltip effect="dark" content="导出为PNG" placement="bottom">
        <div class="icon-box icon-download" @click="downloadPng">
          <el-icon>
            <Picture/>
          </el-icon>
          <span class="icon-tips">PNG</span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="导出为PDF" placement="bottom">
        <div class="icon-box icon-download" @click="downloadPdf">
          <el-icon>
            <Document/>
          </el-icon>
          <span class="icon-tips">PDF</span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="保存为草稿" placement="bottom">
        <div class="icon-box" @click="saveDraft">
          <svg-icon icon-name="icon-caogaoxiang1" color="#555" size="17px"></svg-icon>
          <span class="icon-tips">暂存</span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="预览简历" placement="bottom">
        <div class="icon-box" @click="previewResume">
          <svg-icon icon-name="icon-yulan1" color="#555" size="19px"></svg-icon>
          <span class="icon-tips">预览</span>
        </div>
      </el-tooltip>
      <el-tooltip effect="dark" content="重置所有设置" placement="bottom">
        <div class="icon-box" @click="reset">
          <svg-icon icon-name="icon-zhongzhi" color="#555" size="17px"></svg-icon>
          <span class="icon-tips">重置</span>
        </div>
      </el-tooltip>
    </div>
  </nav>


  <!-- 预览窗口 -->
  <PreviewImage v-show="dialogPreviewVisible" @close="closePreview">
    <resume-preview :show-line="showLine" id="preview"></resume-preview>
  </PreviewImage>
</template>
<script lang="ts" setup>
import appStore from '@/store';
import {ElMessage, ElMessageBox} from 'element-plus';
import 'element-plus/es/components/message-box/style/index';
import {storeToRefs} from 'pinia';
import {debounce} from 'lodash';
import {formatListDate, showNavbar} from '@/utils/common';
import ResumePreview from '@/views/createTemplate/previewer/index.vue';
import LoginDialog from '@/components/LoginDialog/LoginDialog';
import {ArrowLeftBold, Document, Edit, Picture} from "@element-plus/icons-vue";
import PreviewImage from "@/components/PreviewImage/PreviewImage.vue";
import {updateResume, uploadResume} from "@/http/m_api/template";
import {downloadPDF, downloadPNG} from "@/utils/html2pdf";
import {Static} from "@vue/runtime-core";
import {Action} from "element-plus"

const {HJNewJsonStore, templateBase} = storeToRefs(appStore.useCreateTemplateStore);
const {isLoading} = storeToRefs(appStore.useLoadingStore)
const emit = defineEmits([
  'generateReport',
  'generateReportNew',
  'reset',
  'saveDataToLocal',
  'publishComment',
  'genPdf',
  'genPng'
]);
const route = useRoute();
const id = route.params.id;
const showLine = ref(true)
// 返回上一页
const router = useRouter();
const returnPage = () => {
  showNavbar()
  router.go(-1);
};

const downloadPng = ()=>{
  ElMessageBox.confirm(
      '请选择下载类型',
      '提示',
      {
        distinguishCancelAndClose: true,
        confirmButtonText: '单张',
        cancelButtonText: '分页',
        type: 'info',
        center: true,
      }
  ).then(()=>{
    showLine.value = false
    ElMessage.warning('正在为您生成，请稍等')
    dialogPreviewVisible.value = true;
    setTimeout(()=>{
      nextTick(()=>{
        dialogPreviewVisible.value = true;
        downloadPNG(document.getElementById('preview')!, HJNewJsonStore.value.config.title);
      })
    }, 300)
  }).catch((action: Action)=>{
    if (action === 'cancel'){
      showLine.value = false
      dialogPreviewVisible.value = true;
      ElMessage.warning('正在为您生成，请稍等')
      setTimeout(()=>{
        nextTick(()=>{
          dialogPreviewVisible.value = true;
          downloadPNG(document.getElementById('preview')!, HJNewJsonStore.value.config.title, false);
        })
      }, 300)
    }
  })

}

const downloadPdf = ()=>{
  showLine.value = false
  dialogPreviewVisible.value = true;
  ElMessage.warning('正在为您生成，请稍等')
  setTimeout(()=>{
    downloadPDF(document.getElementById('preview')!, HJNewJsonStore.value.config.title);
  }, 300)
}

// 更改标题
const titleIpf = ref<any>(null);
const isShowIpt = ref<boolean>(false);
const changeTitle = () => {
  isShowIpt.value = true;
  titleIpf.value.focus();
};
const blurTitle = () => {
  isShowIpt.value = false;
};

// 保存草稿
let draftTips = ref<string>('');
const saveDataToLocal = () => {
  if(isLoading.value){
    return ;
  }
  return new Promise(async (resolve) => {
    const result = await updateResume(Number.parseInt(id as string), HJNewJsonStore.value.config.title ,templateBase.value.coverUrl, HJNewJsonStore.value);
    if (result.code === 0) {
      draftTips.value = `已保存：${formatListDate(result.data.updateDate)}`;
      ElMessage({type: 'success', message: '保存成功'})
      resolve('保存草稿成功');
    } else {
      ElMessage({type: 'error', message: '保存失败'})
      resolve(null);
    }
  });
};

// 预览简历
const dialogPreviewVisible = ref<boolean>(false);
const previewResume = () => {
  showLine.value = true
  dialogPreviewVisible.value = true;
};

// 关闭预览弹窗
const closePreview = () => {
  dialogPreviewVisible.value = false;
};

// 保存草稿
const saveDraft = () => {
  saveDataToLocal();
};

// 自动保存草稿
const debounced = debounce(() => {
  saveDataToLocal();
}, 5000);
watch(
    () => HJNewJsonStore.value, // JSON数据发生变化，则保存草稿
    (newval, oldVal) => {
      if (newval && oldVal.id) {
        debounced();
      }
    },
    {
      deep: true
    }
);

// 打开智能语种切换弹窗
const dialogTranslateVisible = ref<boolean>(false);
const languageSelect = () => {
  const {token} = appStore.useTokenStore;
  if (!token) {
    openLoginDialog();
    return;
  }
  dialogTranslateVisible.value = true;
};

// 关闭翻译弹窗
const translateCancle = () => {
  dialogTranslateVisible.value = false;
};

// 打开登录弹窗
const openLoginDialog = () => {
  LoginDialog(true);
};

// 重置
const reset = () => {
  ElMessageBox.confirm('此操作会重置简历至初始状态，是否继续?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
      .then(() => {
        emit('reset');
        draftTips.value = '';
      })
      .catch(() => {
      });
};

// 打开AI诊断确认弹窗
const dialogAiOptimizeVisible = ref<boolean>(false);
const aiDrawer = ref<boolean>(false);
const aiOptimize = () => {
  router.push('/analyse')
};

// AI诊断确认弹窗取消
const aiDialogCancle = () => {
  dialogAiOptimizeVisible.value = false;
};

// AI诊断确认弹窗确认
const modelInfoObj = ref<any>({}); // 选择的模型
const updateSuccess = (modelInfo: any) => {
  dialogAiOptimizeVisible.value = false;
  aiDrawer.value = true;
  modelInfoObj.value = modelInfo;
};

// 关闭AI诊断抽屉
const closeAiDrawer = () => {
  aiDrawer.value = false;
};

defineExpose({
  saveDataToLocal
});
</script>
<style lang="scss" scoped>
.nav-box {
  height: 50px;
  width: 100%;
  background-color: #fff;
  position: sticky;
  top: 0;
  display: flex;
  box-shadow: 0 5px 21px 0 rgb(78 78 78 / 5%);
  z-index: 20;

  .nav-left {
    display: flex;
    align-items: center;
    user-select: none;
    padding: 0 0 0 40px;

    .return-icon {
      width: 30px;
      height: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      transition: all 0.3s;

      &:hover {
        opacity: 0.8;
      }
    }

    .resume-title {
      flex-shrink: 0;

      p {
        display: flex;
        align-items: center;
        font-size: 16px;

        .el-icon {
          margin-left: 5px;
          cursor: pointer;
          margin-top: 1px;
        }
      }

      .el-input {
        width: 200px;
      }
    }

    .draft-tips-box {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 15px;
      flex-shrink: 0;

      .draft-tips {
        margin-right: 7px;
        font-size: 12px;
        color: #999999;
      }
    }
  }

  .nav-center {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 100%;

    .left {
      display: flex;
      height: 100%;

      .nav-center-left-box {
        height: 100%;
        display: flex;

        .icon-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #555;
          cursor: pointer;
          padding: 0 15px;
          height: 100%;
          transition: all 0.3s;

          &:hover {
            background-color: rgba($color: #74a274, $alpha: 0.1);
            color: #74a274;
          }

          .icon-tips {
            font-size: 12px;
            margin-top: 8px;
          }
        }
      }

      .draft-tips-box {
        height: 100%;
        display: flex;
        align-items: center;
        margin-left: 10px;

        .draft-tips {
          font-size: 10px;
          color: #999999;
        }
      }
    }
  }

  .nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 50px;

    .icon-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #555;
      cursor: pointer;
      padding: 0 15px;
      height: 100%;
      transition: all 0.3s;

      &:hover {
        background-color: rgba($color: #74a274, $alpha: 0.1);
        color: #74a274;
      }

      .icon-tips {
        font-size: 12px;
        margin-top: 8px;
      }
    }

    .icon-AI-YH {
      border-radius: 50%;
      margin-right: 15px;
      background-image: linear-gradient(
              to top,
              #fcc5e4 0%,
              #fda34b 15%,
              #ff7882 35%,
              #c8699e 52%,
              #7046aa 71%,
              #0c1db8 87%,
              #020f75 100%
      );
      height: 36px;
      width: 36px;
      transition: all 0.3s;

      &:hover {
        opacity: 0.8;
      }
    }

    .ai-bot-container {
      align-items: center;
      background: linear-gradient(271deg, #f6f3ff -0.08%, #f2fdff 99.45%);
      border-radius: 24px;
      box-sizing: border-box;
      display: inline-flex;
      font-size: 14px;
      height: 32px;
      margin-right: 15px;
      overflow: hidden;
      padding: 6px 8px;
      user-select: none;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      .ai-bot-text {
        -webkit-text-fill-color: transparent;
        background: linear-gradient(271deg, #4734f4 0.3%, #4c79ff 99.35%);
        -webkit-background-clip: text;
        background-clip: text;
        font-family: PingFang SC, serif;
        font-size: 14px;
        line-height: 20px;
        margin-left: 4px;
      }
    }

    .ai-optimize-box {
      img {
        border: 2px solid #91adff;
        border-radius: 50%;
      }
    }

    .icon-download {
      background-color: rgba($color: #74a274, $alpha: 1);
      color: #fff;

      &:hover {
        background-color: rgba($color: #74a274, $alpha: 0.9);
        color: #fff;
      }
    }
  }
}
</style>
